import { Col, Row } from 'antd'
import light_default_avatar from '/public/static/img/CompanyDetail/light_default_avatar.png'
const CardList = (data: any) => {
  const { item } = data

  return (
    <div className="card-list-wrapper">
      <p className="item-label">{item.label || '-'}</p>
      <p className="item-value flex">
        {item.value}
        {item.value ? <span className="wrap-style ml-5px">{item.unit}</span> : '--'}
      </p>
    </div>
  )
}

const TeamMetrics = (props: any) => {
  const { data } = props

  const groupList = [
    {
      label: '人员规模',
      unit: '人以上',
      value: data?.companySize,
      span: 2
    },
    {
      label: '参保人数',
      unit: '人',
      value: data?.companyHeadcount,
      span: 2
    }
  ]
  return (
    <div className="team-wrapper" id="团队成员">
      <Row gutter={[16, 16]}>
        {groupList.map((item: any, index: any) => (
          <Col span={12} key={index}>
            <CardList item={item} dataList={data} />
          </Col>
        ))}
      </Row>
      {data.companyTeam && data.companyTeam.length ? (
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <p className="sub-title">主要成员</p>
          </Col>
          {data.companyTeam.map((item: any, index: any) => (
            <Col span={6} key={index}>
              <div className="team-item flex">
                <div className="item-img">
                  <img src={light_default_avatar} alt="" />
                </div>
                <div className="item-right flex">
                  <p className="item-name">{item.personName}</p>
                  <p className="item-title">{item.position}</p>
                </div>
              </div>
            </Col>
          ))}
        </Row>
      ) : null}
    </div>
  )
}
export default TeamMetrics
